<!DOCTYPE html>
<html>
  <head>
    <title>qx.Website tutorial</title>

    <style type="text/css" media="screen">
      .popup {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 150px;
        background-color: #aaa;
        color: white;
        padding: 10px;
        font-family: "Lucida Grande", "DejaVu Sans", "Verdana", sans-serif;
        font-size: 14px;
        border: solid 1px #000000;
      }
    </style>

    <script type="text/javascript" src="q-2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    q.ready(function() {
      // create the notification popup
      var popup = q.create("<div>").appendTo(document.body).addClass("popup").setStyle("border-radius", "5px");

      // create the notification API
      var notify = function(message, delay, callback) {
        popup.setHtml(message);
        popup.fadeIn().once("animationEnd", function() {
          window.setTimeout(function() {
             popup.fadeOut().once("animationEnd", function() {
               callback && callback.call();
             });
          }, delay);
        });
      };

      // DEMO
      notify("This is ...", 1000, function() {
        notify("... a qx.website notification demo.", 2000);
      });
    });
    </script>

  </head>
  <body>

  </body>
</html>